<template>
	<view class="out">
		<checkbox-group name="" @change="itemChange">
			<view class="item" v-for="item in goods" :key="item.id">
				<label>
					<checkbox :value="item.id"></checkbox>
					<text class="title">{{item.name}}</text>
					<text class="price">{{item.price}}元</text>
					<text class="del" @click="remove(item.id)">删除</text>
				</label>
			</view>
		</checkbox-group>
	</view>
	<view class="card">
		<view class="text">
			选择了{{}}个产品，总价:##元
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	const goods = ref([
		{id:"11",name:"小米",price:3299},
		{id:"22",name:"华为",price:3599},
		{id:"33",name:"oppo",price:1099},
		{id:"44",name:"苹果",price:4999},
	]);	
	const chooseItems = ref(0);
	function remove(id){
		console.log(id);
		goods.value = goods.value.filter(item => item.id !== id);
	};
	function itemChange(e){
		console.log(e);
		chooseItems = e.detail.value
	};

</script>

<style lang="scss" scoped>
	.out{
		padding: 10px;
		.item{
			padding: 10px 0;
			.del{
				color: red;
			}
		};
		.price{
			margin-left: 10px;
			margin-right: 10px;
		};
	};
	.card{
		margin-top: 30px;
		border-top: 1px solid green;
		padding: 10px;
	};
</style>
